<template>
    <div class="page-store-platform-store-present bg-content">
        <scroll-view scroll-x="true">
            <div class="table table-bordered" style="text-align: center; background: white; width: 750px;">
                <div class="tr">
                    <div class="td text-center bold" style="width: 150px;">店铺图片</div>
                    <div class="td text-center bold" style="width: 200px;">店铺名称</div>
                    <div class="td text-center bold" style="width: 300px;">店铺标题</div>
                    <div class="td text-center bold" style="width: 100px;">营业状态</div>
                </div>
                <div class="tr" v-for="(item, index)  in tbStoreList" :key="item.id" @click="gotoStore(item)">
                    <div class="td text-center" style="width: 150px;">
                        <myImg :obj="item"
                               :sysFile="{fkId: item.id, typeMark: 'thumbnail'}"
                               :customStyle="'pointer-events: none; height: 100px;  width:100px; background-size: cover; background-repeat: no-repeat; background-position: center;'"
                               :defaultUrl="'/pages/sub/sub3-community-platform/static/default-image/store-brand.jpg'"
                               :imageView="'imageView2/1/w/300/h/300'"
                        ></myImg>
                    </div>
                    <div class="td text-center" style="width: 200px;">{{item.name ? item.name : '这个人很懒店铺名尚未设置'}}</div>
                    <div class="td text-center" style="width: 300px;"> {{item.title}}</div>
                    <div class="td text-center" style="width: 100px;">
                        <span v-if="item.operatingStatus" style="color: green;">{{item.operatingStatusText}}</span>
                        <span v-if="!item.operatingStatus">{{item.operatingStatusText}}</span>
                    </div>
                </div>
            </div>
        </scroll-view>

        <div style="padding-top: 10px; padding-bottom: 10px;">
            <u-loadmore :status="pagination.status" bg-color="#eeeeee"/>
        </div>
    </div>
</template>

<script>
    import {TbStoreService} from "@/dev/services/tb-store.service";
    import {CommonUtil} from "@/dev/core/utils/common.util";
    import myImg from '@/components/my-img'

    export default {
        data() {
            return {
                tbStoreList: []
            }
        },
        components: {
            myImg
        },
        onShow() {
            this.doRefresh(this.tbStoreList);
        },
        methods: {
            /**
             * 加载更多数据中
             * @param infiniteScroll
             */
            doInfinite(infiniteScroll) {
                const _self = this;
                new TbStoreService().findTableList({
                    pagination: _self.pagination,
                    data: {
                        communityId: _self.globalVariable.userInfo.tbCommunity.id,
                        status: '1',
                        deleted: 0,
                        orderBy: 'create_time desc'
                    },
                }).then(result => {
                    _self.pagination.refreshPage(result);
                    _self.tbStoreList = [..._self.tbStoreList, ...result.list];
                });
            },

            gotoStore(item) {
                const _self = this;
                if (!(item.status === '1' && item.operatingStatus)) {
                    CommonUtil.alert('该店铺尚未营业，请稍后再访问！');
                    return;
                }
                _self.navigateTo(`/pages/common/store/index?storeId=${item.id}`);
            }
        }
    }
</script>
